<template>
    <div class="homeBox">
        <div class="bannerIn">
            <div class="img_pic">
                <img src="../assets/images/u8.png" alt="">
                <img src="../assets/images/u7.svg" alt="">
                <img src="../assets/images/u9.png" alt="">
            </div>
        </div>
        <div class="content-item">
            <div class="item_lis" v-for="item, index in 4" :key="index">
                <div class="item_titke">
                    <div class="title">招标预告</div>
                    <div class="more">更多>></div>
                </div>
                <div class="itemcol_box">
                    <div class="itemcol">
                        <div class="col" v-for="data, keys in 5" :key="keys">
                            <div class="col-title">
                                <img class="icon" src="../assets/images/u19.png" alt="">
                                <p>[麻城中心{{ data }}] 麻城中心麻城中心麻城中心麻城中心中心</p>
                            </div>
                            <div class="datetime">2013-{{ data }}-23</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

</script>
<style lang="less" scoped>
.homeBox {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;

    .bannerIn {
        height: 130px;
        position: relative;
        padding: 10px 20px;

        .img_pic {
            height: 130px;
            border-radius: 20px;
            display: flex;
            flex-direction: row;
            
            img {
                width: 1200px;
                height: 100%;
                padding-left: 30px;
            }
        }
    }

    .content-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 20px;

        .item_lis {
            width: 45%;
            background: #fff;
            border-radius: 20px;
            margin-left: 20px;
            margin-bottom: 20px;

            .item_titke {
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 10px 20px;
                background-image: url(../assets//images/u12.png);
                background-size: 100% 100%;

                .title {
                    color: #fff;
                }

                .more {
                    font-size: 15px;
                    color: rgb(106, 106, 106);
                }
            }
        }
    }

    .itemcol_box {
        display: flex;
        align-items: center;

        .itemcol {
            width: 100%;
            height: 300px;
            padding: 15px 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .col {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .col-title {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 15px;
                    color: rgb(106, 106, 106);

                    .icon {
                        width: 25px;
                        height: 25px;
                        margin-right: 10px;
                    }

                    .datetime {
                        font-size: 15px;
                        color: rgb(106, 106, 106);
                    }
                }
            }
        }
    }
}
</style>